<hr class="layui-bg-gray">
<hr class="layui-bg-gray">

<div style="width: 100%;">

    <table style="width: 100%;" id="sea-tab">
        <tr style="width: 100%;height: 40px">
            <td style="text-align: right">用户姓名：</td>
            <td><input name="name" id="userName" style="width: 150px;height: 19px"></td>
            <td style="text-align: right">用户账号：</td>
            <td><input name="name" id="loginName" style="width: 150px;height: 19px"></td>
            <td style="text-align: right">是否锁定：</td>
            <td>
                <select name="locked" id="locked" style="width: 150px;height: 24px;border-color: #777777;border-radius: 2px">
                    <option value="-1" selected="selected" disabled style="color: #888888">--请选择--</option>
                    <option value="0">正常使用</option>
                    <option value="1">锁定账户</option>
                </select>
            </td>
            <td style="width: 80px; text-align:center"><button onclick="queryUser()" style="width: 60px; cursor:pointer">查 询</button></td>
            <td style="width: 80px; text-align:center"><button onclick="clearInput()" style="width: 60px; cursor:pointer">重 置</button></td>
            <td style="text-align:center">|</td>
            <td style="width: 80px; text-align:center"><button onclick="fillUserInfo()" style="width: 60px; cursor:pointer">新增</button></td>
            <td style="text-align:center">|</td>
            <td style="width: 80px; text-align:center"><button id="delUsers" style="width: 60px; cursor:pointer">批量删除</button></td>
        </tr>
    </table>

</div>

<hr class="layui-bg-gray" id="roleTemp">
<hr class="layui-bg-gray">

<table class="layui-hide" id="pagingInfo" lay-filter="pagingInfo" style="width: 100%"></table>

<script type="text/html" id="userBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    $(function () {
        userInfo(null,null,null);

        //获取角色列表
        $.ajax({  "type":"get",
            "url":'role/queryAllRoles',
            "data":null,
            "success":function(result){
                var roleList = result.data;
                $('#roleTemp').data('roleList',roleList);
            }}
        );
    })

    function queryUser() {
        var name = $('#userName').val();
        var loginName = $('#loginName').val();
        var locked = $('#locked').val();
        userInfo(name,loginName,locked);
    }

    function clearInput() {
        $('#sea-tab input').val('');
        $('#locked').val('-1');
        //document.getElementById("locked").value="";
    }

    function fillUserInfo() {
        layer.open({
            title:'添加用户',
            id: 'LAY_userAdd',
            type: 1,
            area: ['500px', '450px'],
            shadeClose: true,
            closeBtn: 0,
            btn: ['添加','取消'],
            content: getHtml('/sys/user/edit.html'),
            yes: function(){
                if (checkStr($('#euRoleIds1').val())){
                    layer.msg("请为用户至少选择一个角色!")
                }else {
                    layer.closeAll();
                    // 执行确定逻辑
                    addUser();
                }

            }
            ,btn2: function(){
                layer.closeAll();
            }
        });
    }

    function addUser() {
        let userName = $('#euName1').val();
        let loginName = $('#euLogin1').val();
        //let password = $('#euPwd1').val();
        let password = window.btoa($('#euPwd1').val());
        let roleIds = $('#euRoleIds1').val();
        let locked;
        if ($('#euLocked1').prop('checked')){
            locked = 0;
        }else {
            locked = 1;
        }

        let url = 'user/addRecord';
        let params = {'userName':userName,'loginName':loginName,'password':password,'roleIds':roleIds,'locked':locked};

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){
                //alert(result.desc);
                layer.msg(result.desc);
                loadUserPaging();
            }})
    }

    function updateUser() {
        let id = $('#euId1').val();
        let userName = $('#euName1').val();
        let loginName = $('#euLogin1').val();
        let password = window.btoa($('#euPwd1').val());
        let roleIds = $('#euRoleIds1').val();
        let locked;
        if ($('#euLocked1').prop('checked')){
            locked = 0;
        }else {
            locked = 1;
        }

        let url = 'user/updateOneById';
        let params = {'id':id,'userName':userName,'loginName':loginName,'password':password,'roleIds':roleIds,'locked':locked};

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){
                //alert(result.desc);
                layer.msg(result.desc);
                loadUserPaging();
            }})
    }

    function deleteUserByIds(ids) {
        layer.confirm('确定删除吗?', function(){
            let url = 'user/deleteByIds';
            $.ajax({  "type":"post",
                "url":url,
                "data":{'ids':ids},
                "success":function(result){
                    //alert(result.desc);
                    layer.msg(result.desc);
                    loadUserPaging();
                }
            })
        });
    }

</script>

<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(pagingInfo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(pagingInfo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                deleteUserByIds(data.id);

            } else if(obj.event === 'edit'){
                // 编辑操作
                $('#page-com').data('userDataInfo',data);

                layer.open({
                    title:'修改用户',
                    id: 'LAY_userEdit',
                    type: 1,
                    area: ['500px', '450px'],
                    shadeClose: true,
                    closeBtn: 0,
                    btn: ['修改','取消'],
                    content: getHtml('/sys/user/edit.html'),
                    yes: function(){
                        if (checkStr($('#euRoleIds1').val())){
                            layer.msg("请为用户至少选择一个角色!")
                        }else {
                            layer.closeAll();
                            // 执行确定逻辑
                            updateUser();
                            loadUserPaging();
                        }

                    }
                    ,btn2: function(){
                        layer.closeAll();
                    }
                });
            }
        });

        //批量删除
        $('#delUsers').click(function () {
            var checkStatus = table.checkStatus('userDataList');
            var ids = [];
            $(checkStatus.data).each(function (i, o) {//o即为表格中一行的数据
                ids.push(o.id);
            });
            if (ids.length < 1) {
                layer.msg('无选中项');
                return false;
            }
            ids = ids.join(",");

            // 指删除操作
            deleteUserByIds(ids);
        });

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>